<template>
    <div class="search">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <span class="blue-c">&nbsp;信息查询</span>
        </div>
        
        <!-- 服务 -->
        <div class="service flexv">
            <div class="service-head flex ali-c">
                <div class="service-head-img">
                    <img src="~@/assets/service-ico.png" alt="">
                </div>
                <span class="blue-c">请选择服务项目</span>
            </div>
            <ul class="service-lists flexv">
                <li class="service-list flex">
                    <router-link :to="'/builders'" class="flex1 flex">
                        <span class="service-point"></span>
                        <p class="service-name flex1">二级建造师查询</p>
                    </router-link>
                </li>
                <li class="service-list flex">
                    <router-link :to="'/peoples'" class="flex1 flex">
                        <span class="service-point"></span>
                        <p class="service-name flex1">三类人员查询</p>
                    </router-link>
                </li>
                <li class="service-list flex">
                    <router-link :to="'/occupation'" class="flex1 flex">
                        <span class="service-point"></span>
                        <p class="service-name flex1">八大员查询</p>
                    </router-link>
                </li>
                <li class="service-list flex">
                    <router-link :to="'/companies'" class="flex1 flex">
                        <span class="service-point"></span>
                        <p class="service-name flex1">建筑企业资质查询</p>
                    </router-link>
                </li>
            </ul>
        </div>

        <!-- 底部占位符 -->
        <div class="pub-foot-seat"></div>

        <pub-foot search="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue'
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
export default {
    data() {
        return{

        }
    },
    created(){

    },
    components: {
        pubHead,
        pubFoot
    },
    methods: {
        
    }
}
</script>
<style lang="less" scoped>
.search {
    min-height: 100vh;
    background-color: #f5f5f5;
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        span,a {
            color: #999;
            font-weight: bold;
        }
    }
    // 服务项目
    .service {
        padding: 0.58rem 0.4rem;
        background-color: #fff;
        .service-head {
            font-size: 0.4rem;
            line-height: 120%;
            .service-head-img {
                width: 0.62rem;
                height: 0.62rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            span {
                margin-left: 0.24rem;
                font-weight: bold;
            }
        }
        .service-lists {
            width: 100%;
            .service-list {
                width: 100%;
                height: 1rem;
                margin-top: 0.5rem;
                .service-point {
                    width: 0.12rem;
                    height: 0.12rem;
                    margin: auto 0.18rem;
                    border-radius: 100%;
                }
                .service-name {
                    font-size: 0.32rem;
                    line-height: 1rem;
                    font-weight: bold;
                    text-align: center;
                    border-radius: 0.1rem;
                }
            }
            .service-list:first-child {
                .service-point{
                    background-color: #ff354d;
                }
                .service-name{
                    color: #ff354d;
                    background-color: #ffebed;
                }
            }
            .service-list:nth-child(2) {
                .service-point{
                    background-color: #2065f0;
                }
                .service-name{
                    color: #2065f0;
                    background-color: #e7f7fd;
                }
            }
            .service-list:nth-child(3) {
                .service-point{
                    background-color: #55d8c2;
                }
                .service-name{
                    color: #55d8c2;
                    background-color: #e5fcf7;
                }
            }
            .service-list:last-child {
                margin-bottom: 0.44rem;
                .service-point{
                    background-color: #ff9a23;
                }
                .service-name{
                    color: #ff9a23;
                    background-color: #fdf2e9;
                }
            }
        }
    }
    .pub-foot-seat {
        width: 100%;
        height: 0.98rem;
    }
}
</style>
